<!--
 * @Author: 码上talk|RC
 * @Date: 2021-08-04 17:34:56
 * @LastEditTime: 2021-08-16 14:31:15
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-portal/subpackage/default/pages/shop/@fragment/stat-item.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <view class="stat-item">
    <view class="stat-item__l">
      <image class="stat-item-icon" :src="'icon/money.png' | prefixOssUrl" />
    </view>
    <view class="stat-item__r">
      <view class="stat-label">
        <text class="stat-label-text">{{ label }}</text>
        <text v-if="unit" class="stat-label-unit">（{{ unit }}）</text>
      </view>
      <text class="stat-value">{{ value||'--' }}</text>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  mixins: [],
  props: {
    label: String,
    value: [String, Number],
    unit: String,
    iconUrl: String
  },
  data () {
    return {}
  },
  computed: {
    iconImagUrl () {
      if (this.iconUrl) return this.iconUrl
      return this.prefixOssUrl('icon/money.png')
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.stat-item {
  .flexLayout();
  padding: 27rpx 20rpx;
  margin: 15rpx 0 15rpx 30rpx;
  background: #fff;
  box-sizing: border-box;
  border-radius: 20rpx;
  width: 330rpx;
  &__l {
    width: 90rpx;
    .stat-item-icon {
      width: 60rpx;
      height: 60rpx;
    }
  }
  &__r {
    .stat-label {
      &-text {
        font-size: 28rpx;
        font-weight: 500;
        color: #999999;
      }
      &-unit {
        font-size: 24rpx;
        color: #999;
      }
    }
    .stat-value {
      margin-top: 30rpx;
      font-size: 40rpx;
      font-weight: bold;
      color: #333333;
    }
  }
}
</style>